<template>
  <div>
    <MyTasks ref="myTaskRef"/>
    <!--    任务快速查询搜索框-->
    <div class="selectCard">
      <el-input :placeholder="selectInputPlaceHolder" v-model="selectCondition" class="input-with-select"
                style="margin-left: 27px;width: 86%">
<!--        <el-select v-model="select" slot="prepend" placeholder="查询类型" style="width: 100px">
          <el-option label="任务id" value="2"></el-option>
        </el-select>-->
      </el-input>
      <el-button icon="el-icon-search" type="primary" style="margin-left: 10px;margin-right: 10px;"
                 @click="selectTask(selectCondition)">搜索
      </el-button>
      <el-button type="danger" plain @click="clearSelect">清空</el-button>
    </div>
    <!--任务详情显示-->
    <div class="myWorkDisplayBar">
      <!--      任务侧边展示栏-->
      <div style="width:30% ">
        <el-card style="margin: 2px">
          <div slot="header" class="clearrfix" style="display: flex">
            <span style="font-family: 'PingFang SC';font-weight: bolder;font-size: 18px">
              我的任务
            </span>
          </div>
          <el-table :data="taskList">

            <!--           可以按照优先级来排序 -->
            <el-table-column
                prop="taskPriority"
                label="优先级"
                sortable
                width="auto"
                column-key="priority"
                :filters="taskList"
                :filter-method="filterHandler"
            >
              <template slot-scope="scope">
                <el-tag
                    :type="switchTaskPriority(scope.row.taskPriority).tagStyle"
                    disable-transitions
                    effect="dark"
                >{{ switchTaskPriority(scope.row.taskPriority).priorityName }}
                </el-tag>
              </template>

            </el-table-column>

            <el-table-column
                prop="taskType"
                label="任务类型"
                width="auto">
              <template slot-scope="scope1">
                <el-tag
                    type="info"
                    effect="plain"
                    disable-transitions>
                  <i :class="switchTaskType(scope1.row.taskType).iconStyle"></i>
                  {{ switchTaskType(scope1.row.taskType).typeName }}
                </el-tag>
              </template>

            </el-table-column>

            <el-table-column
                prop="taskName"
                label="任务名称"
                width=160px>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="showTaskInfo(scope.row.taskId)"
                >详情
                </el-button>
              </template>
            </el-table-column>

          </el-table>

        </el-card>
      </div>

      <div style="width: 70%;display: flex;flex-direction:column;height: 100vh;border-radius: 6px">
        <!--任务头部描述-->
        <div
            style="width: 100% ;height:10%;display: flex;background-color: white;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
          <!--            图标显示，根据任务的类型进行切换-->
          <div style="width: 8% ;  height: 80%;border-radius: 12px;margin: 12px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: flex; align-items: center;justify-content: center">
            <i :class="switchTaskType(currentTask.taskType).iconStyle" style="font-size: 50px;"></i>
          </div>

          <!--          任务的header-->
          <div style="width: 92%;height: 100%;background-color: white;display: flex;flex-direction:column; ">
            <div
                style="height: 30%;width:75% ;color: dodgerblue;font-family: 'PingFang SC';font-size: 15px;display: flex;align-items: center">
              {{ taskTranslation.projectName }}/任务ID:{{ currentTask.taskId }}
            </div>
            <div style="height: 70%; width:75% ;font-size: 24px;font-family: 'PingFang SC';font-weight: bolder">
              {{ currentTask.taskName }}
            </div>
          </div>
        </div>

        <!--        任务操作的按钮-->
        <div style="width: 100%;height: 5%;background-color: white;display: flex; align-items: center">
          <div style="width: 80%">
            <el-button type="info" plain style="margin-left: 12px" icon="el-icon-edit" :disabled="editButtonShow"
                       @click="editTask"> 编辑
            </el-button>

            <el-dialog title="编辑任务" :visible.sync="editTaskDialogFormVisible">
              <!--            编辑任务表单-->
              <el-form :model="editTaskEntity" :rules="editTaskRules" ref="ruleForm" label-width="100px"
                       class="demo-ruleForm">
                <el-form-item label="任务名称" prop="taskName">
                  <el-input v-model="editTaskEntity.taskName"></el-input>
                </el-form-item>

                <el-form-item label="所属项目" prop="projectId">
                  <el-select v-model="editTaskEntity.projectId" placeholder="请选择所属项目">
                    <el-option
                        v-for="item in projectList"
                        :label="item.projectName"
                        :value="item.projectId">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="优先级" prop="taskPriority">
                  <el-select v-model="editTaskEntity.taskPriority" placeholder="请选择任务优先级">
                    <el-option
                        v-for="item in taskPriorityList"
                        :label="item.name"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="任务描述" prop="desc">
                  <el-input type="textarea" v-model="editTaskEntity.taskDescription"></el-input>
                </el-form-item>

              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="editTaskDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editTaskSubmit">确 定</el-button>
              </div>
            </el-dialog>


            <el-button type="info" plain style="margin-left: 12px" icon="el-icon-chat-line-round"> 添加评论</el-button>
            <el-button type="info" plain style="margin-left: 12px" icon="el-icon-s-promotion" @click="assignTasks()"
                       :disabled="assignButtonShow"> 分配
            </el-button>

            <el-dialog title="任务分配" :visible.sync="assignVisible">
              <el-table
                  :data="assignableUsers.filter(data => !assignableUsersSearch || data.infoName.toLowerCase().includes(assignableUsersSearch.toLowerCase()))"
                  style="width: 100%">
                <el-table-column
                    label="员工Id"
                    prop="userId">
                </el-table-column>
                <el-table-column
                    label="姓名"
                    prop="infoName">

                  <template slot-scope="scope">
                    <el-tag
                        type="info"
                        disable-transitions
                    >{{ scope.row.infoName }}
                    </el-tag>
                  </template>

                </el-table-column>
                <el-table-column
                    label="在办任务数"
                    prop="progressTasksNum">
                  <template slot-scope="scope">
                    <el-tag
                        type="danger"
                        disable-transitions
                        effect="dark"
                    >{{ scope.row.progressTasksNum }}
                    </el-tag>
                  </template>

                </el-table-column>
                <el-table-column
                    label="邮箱"
                    prop="email">
                </el-table-column>

                <el-table-column
                    align="right">
                  <template slot="header" slot-scope="scope">
                    <el-input
                        v-model="assignableUsersSearch"
                        size="mini"
                        placeholder="输入姓名搜索"/>
                  </template>

                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        @click="assign(scope.row.userId)">分配
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!--              <el-table :data="this.assignableUsers">
                              <el-table-column property="date" label="日期" width="150"></el-table-column>
                              <el-table-column property="name" label="姓名" width="200"></el-table-column>
                              <el-table-column property="address" label="地址"></el-table-column>
                            </el-table>-->
            </el-dialog>


            <el-button type="info" plain style="margin-left: 12px">
              {{ switchTaskStatus(currentTask.taskStatus).statusName }}
            </el-button>
            <el-select v-model="statusValue" placeholder="操作" style="margin-left: 12px">
              <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button type="primary" plain style="margin-left: 12px" @click="submitTaskDialogFormVisible = true">提交
            </el-button>
            <!--           提交出现弹窗，填写解决方案或者是挂起原因 -->
            <el-dialog title="提交任务" :visible.sync="submitTaskDialogFormVisible">
              <el-form :model="currentTask" :rules="editTaskRules" ref="ruleForm" label-width="100px"
                       class="demo-ruleForm">

                <el-form-item label="备注" prop="desc">
                  <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="submitTaskText"
                            placeholder="请填写解决方案、挂起原因、或者测试未通过原因备注"></el-input>
                </el-form-item>

              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="submitTaskDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitTask(statusValue)">提交</el-button>
              </div>
            </el-dialog>


            <!--          下面这些是管理员才能使用-->
            <el-button type="danger" plain style="margin-left: 12px" :disabled="repulseButtonShow" @click="taskRepulse">
              打回
            </el-button>
            <el-button type="success" plain style="margin-left: 12px" :disabled="passButtonShow" @click="taskPass"> 通过
            </el-button>
          </div>
          <div style="width: 20%; display: flex; align-items: center ;justify-content: right;margin-right: 12px">
            <el-button round icon="el-icon-share"></el-button>
            <el-button round icon="el-icon-refresh" @click="location.reload()"></el-button>
          </div>

        </div>


        <div
            style="width: 100%;height: 85%;background-color: white;display: flex;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin-top: 2px">

          <!--          任务详情-->
          <div style="width: 75%;background-color: white; display: flex; flex-direction:column; align-items: center ">
            <!--            详情-->
            <div style="width: 90%;margin-top: 20px">
              <div style="align-items: center;justify-content: left ;display: flex;margin: 10px">
                <el-button :icon="switchArrow" circle @click="detailsDisplay=!detailsDisplay " size="mini"
                           style="margin-right: 4px"></el-button>
                <div style="font-size: 20px;font-family: 'PingFang SC'">详情</div>
              </div>

              <transition name="el-zoom-in-top">

                <el-descriptions class="margin-top" :column="2" border v-show="detailsDisplay">
                  <el-descriptions-item>
                    <template slot="label">
                      类型
                    </template>
                    <i :class="switchTaskType(currentTask.taskType).iconStyle"></i>
                    {{ switchTaskType(currentTask.taskType).typeName }}

                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      状态
                    </template>

                    <el-tag
                        hit="false"
                        :color="switchTaskStatus(currentTask.taskStatus).color"
                        disable-transitions
                        effect="dark"
                    >{{ switchTaskStatus(currentTask.taskStatus).statusName }}
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      优先级
                    </template>
                    <el-tag size="small" :type="switchTaskPriority(currentTask.taskPriority).tagStyle">
                      {{ switchTaskPriority(currentTask.taskPriority).priorityName }}
                    </el-tag>

                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      所属项目
                    </template>
                    {{ taskTranslation.projectName }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      备注
                    </template>
                    {{ currentTask.taskSolution }}
                  </el-descriptions-item>

                </el-descriptions>
              </transition>
            </div>
            <!--            描述-->
            <div style="width: 90%;margin-top: 20px">
              <div style="align-items: center;justify-content: left ;display: flex;margin: 10px">
                <el-button :icon="switchArrow" circle @click="describeDisplay=!describeDisplay " size="mini"
                           style="margin-right: 4px"></el-button>
                <div style="font-size: 20px;font-family: 'PingFang SC'">描述</div>
              </div>
              <transition name="el-zoom-in-top">
                <el-descriptions direction="vertical" :column="1" border v-show="describeDisplay">
                  <el-descriptions-item>
                    {{ currentTask.taskDescription }}
                  </el-descriptions-item>
                </el-descriptions>
              </transition>
            </div>
            <!--            文件上传-->
            <!--            <div style="width: 90%;margin-top: 20px">
                          <div style="align-items: center;justify-content: left ;display: flex;margin: 10px">
                            <el-button :icon="switchArrow" circle @click="updateDisplay=!updateDisplay " size="mini"
                                       style="margin-right: 4px"></el-button>
                            <div style="font-size: 20px;font-family: 'PingFang SC'">文件附件</div>
                          </div>

                          <transition name="el-zoom-in-top">
                            <div v-show="updateDisplay"
                                 style=" height: 100% ;display:flex ;align-items: center;justify-content: center; border-radius: 12px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                              <el-upload
                                  class="upload-demo"
                                  drag
                                  action="https://jsonplaceholder.typicode.com/posts/"
                                  multiple>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                              </el-upload>
                            </div>
                          </transition>

                        </div>-->
            <!--任务流转节点显示-->
            <div style="width: 90%;margin-top: 20px">
              <div style="align-items: center;justify-content: left ;display: flex;margin: 10px">
                <el-button :icon="switchArrow" circle @click="updateDisplay=!updateDisplay " size="mini"
                           style="margin-right: 4px"></el-button>
                <div style="font-size: 20px;font-family: 'PingFang SC'">任务流转显示</div>
              </div>

              <transition name="el-zoom-in-top">
                <div v-show="updateDisplay"
                     style=" height: 100% ;width: 100%; display:flex ;align-items: center;justify-content: center; border-radius: 12px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                  <!--                  步骤条样式-->
                  <el-steps :active="100" align-center>
                    <el-step
                        style="font-size: 10px"
                        v-for="item in handOverNodePath"
                        :title="item.taskHandlerName"
                        :description="switchTaskStatus(item.taskStatus).statusName">
                    </el-step>

                  </el-steps>
                  <!--                  <el-timeline>
                                      <el-timeline-item timestamp="2018/4/12" placement="top">
                                        <el-card>
                                          <h4>更新 Github 模板</h4>
                                          <p>王小虎 提交于 2018/4/12 20:46</p>
                                        </el-card>
                                      </el-timeline-item>
                                      <el-timeline-item timestamp="2018/4/3" placement="top">
                                        <el-card>
                                          <h4>更新 Github 模板</h4>
                                          <p>王小虎 提交于 2018/4/3 20:46</p>
                                        </el-card>
                                      </el-timeline-item>
                                      <el-timeline-item timestamp="2018/4/2" placement="top">
                                        <el-card>
                                          <h4>更新 Github 模板</h4>
                                          <p>王小虎 提交于 2018/4/2 20:46</p>
                                        </el-card>
                                      </el-timeline-item>
                                    </el-timeline>-->
                  <!--时间条样式-->
                  <!--                  <el-timeline>
                                      <el-timeline-item
                                          v-for="item in handOverNodePath"
                                          :key="item.handOverNum"
                                          :timestamp="item.createTime">
                                        经办人：{{item.taskHandlerName}} 操作：
                                        {{ switchTaskStatus(item.taskStatus).statusName}}
                                      </el-timeline-item>
                                    </el-timeline>-->
                </div>
              </transition>

            </div>


          </div>


          <!--          任务经办信息-->
          <div
              style="width: 25%;background-color: white;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin-left: 2px;display: flex;flex-direction: column;align-items: center">
            <!--            人员-->
            <div style="width: 90%;margin-top: 20px;">
              <div style="align-items: center;justify-content: left ;display: flex;margin: 10px">
                <el-button :icon="switchArrow" circle @click="personnelDisplay=!personnelDisplay " size="mini"
                           style="margin-right: 4px"></el-button>
                <div style="font-size: 20px;font-family: 'PingFang SC'">人员</div>
              </div>
              <transition name="el-zoom-in-top">
                <el-descriptions class="margin-top" :column="1" v-show="personnelDisplay" direction="vertical" border>
                  <el-descriptions-item :contentStyle="{'text-align': 'center'}">
                    <template slot="label">
                      <i class="el-icon-user"></i>
                      任务经办人
                    </template>
                    {{ taskTranslation.currentTaskHandlerName }}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle="{'text-align': 'center'}">
                    <template slot="label">
                      <i class="el-icon-user"></i>
                      任务创建人
                    </template>
                    {{ taskTranslation.createUserName }}
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle="{'text-align': 'center'}">
                    <template slot="label">
                      <i class="el-icon-refresh-right"></i>
                      重开次数
                    </template>
                    {{ currentTask.restartTimes }}
                  </el-descriptions-item>
                </el-descriptions>
              </transition>
            </div>
            <!--            日期-->
            <div style="width: 90%;margin-top: 20px;">
              <div style="align-items: center;justify-content: left ;display: flex;margin: 10px">
                <el-button :icon="switchArrow" circle @click="dateDisplay=!dateDisplay " size="mini"
                           style="margin-right: 4px"></el-button>
                <div style="font-size: 20px;font-family: 'PingFang SC'">日期</div>
              </div>
              <transition name="el-zoom-in-top">
                <el-descriptions class="margin-top" :column="1" v-show="dateDisplay" direction="vertical" border>
                  <el-descriptions-item :contentStyle="{'text-align': 'center'}">
                    <template slot="label">
                      <i class="el-icon-date"></i>
                      创建时间
                    </template>
                    {{ currentTaskDate.createDate }}
                    <!--                    {{  timeFormatConversion(currentTask.createTime)}}-->
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle="{'text-align': 'center'}">
                    <template slot="label">
                      <i class="el-icon-date"></i>
                      最近更新时间
                    </template>
                    {{ currentTaskDate.updateDate }}
                    <!--                    timeFormatConversion(currentTask.updateTime)-->
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle="{'text-align': 'center'}">
                    <template slot="label">
                      <i class="el-icon-date"></i>
                      截至时间
                    </template>
                    {{ currentTaskDate.deadlineDate }}
                    <!--                    {{timeFormatConversion(currentTask.deadlineTime)}}-->
                  </el-descriptions-item>
                  <el-descriptions-item :contentStyle="{'text-align': 'center'}">
                    <template slot="label">
                      <i class="el-icon-date"></i>
                      完成时间
                    </template>
                    {{ currentTaskDate.completionDate }}
                    <!--                    {{ timeFormatConversion(currentTask.completionTime)}}-->
                  </el-descriptions-item>
                </el-descriptions>
              </transition>
            </div>

          </div>
        </div>

      </div>


    </div>


  </div>
</template>

<script>
export default {
  name: "MyWork",
  data() {
    return {
      selectCondition: '',
      selectInputPlaceHolder: '输入任务id进行查询',
      select: '',
      iconfontStyle: 'iconfont iconbug', //任务类型图标
      statusOptions: [{
        value: '0',
        label: '创建未处理'
      }, {
        value: '1',
        label: '处理中',
      }, {
        value: '2',
        label: '挂起'
      }, {
        value: '3',
        label: '完成待测试'
      },
        {
          value: '4',
          label: '测试通过'
        },
        {
          value: '5',
          label: '测试未通过'
        }, {
          value: '6',
          label: '任务关闭'
        }
      ],
      statusValue: '', //任务状态选择框显示
      switchArrow: 'el-icon-caret-bottom',//展开功能的箭头类型
      detailsDisplay: true,
      describeDisplay: true,
      updateDisplay: true,
      personnelDisplay: true,
      dateDisplay: true,

      //任务实体类
      currentTask: {
        taskId: '',
        taskType: '',
        taskName: '',
        createUserId: '',
        currentTaskHandlerId: '',
        taskHandOverPath: '',
        taskStatus: '',
        createTime: [],
        updateTime: [],
        deadlineTime: [],
        completionTime: [],
        projectId: '',
        taskPriority: '',
        restartTimes: '',
        taskDescription: '',
        taskSolution: ''
      },
      taskList: [],//当前用户的所有任务
      loginUser: JSON.parse(localStorage.getItem("loginUser")), //当前登录用户

      taskTranslation: { //task的字段翻译封装对象
        taskId: '',
        createUserName: '',
        currentTaskHandlerName: '',
        projectName: ''
      },
      assignVisible: false,//task分配功能弹窗显示
      assignableUsers: [], //可以被分配任务的用户们
      assignableUsersSearch: '', //task分配用户表格的搜索绑定

      //下面是一些功能按钮绑定
      assignButtonShow: false, //任务分配按钮可以点击
      editButtonShow: false,  //编辑按钮可点击
      repulseButtonShow: false, //打回按钮可点击
      passButtonShow: false,//通过按钮可点击

      handOverNodePath: [], //任务流转节点路径
      projectList: [],//task编辑功能项目下拉选择实体
      taskPriorityList: [
        {name: '低', value: 0},
        {name: '中', value: 1},
        {name: '高', value: 2},
        {name: '紧急', value: 3}
      ],
      editTaskDialogFormVisible: false,
      submitTaskDialogFormVisible: false,
      editTaskEntity: {},
      editTaskRules: {
        taskName: [
          {required: true, message: '请输入任务名称', trigger: 'blur'}
        ],
        projectId: [
          {required: true, message: '请选择所属项目', trigger: 'blur'}
        ],
        taskPriority: [
          {required: true, message: '请选择任务优先级', trigger: 'blur'}
        ],
        taskDescription: [
          {required: true, message: '请输入任务描述', trigger: 'blur'}
        ]
      },
      submitTaskText: '',
      //日期转换封装
      currentTaskDate: {
        createDate: '',
        updateDate: '',
        completionDate: '',
        deadlineDate: ''
      },
      selectTaskId:localStorage.getItem("selectTaskId")
    }
  },

   mounted() {
    /*//监听从任务汇总传递过来的任务，查看任务详情
    this.$on('viewTaskDetails', this.showTaskInfo);*/


    //页面打开的时候，查询我的任务并且判断当前用户权限
    this.$request.get("/task/getMyTasks", {
      params: {
        currentTaskHandlerId: this.loginUser.uid
      }
    }).then(res => {
      this.taskList = res.data
      //设置默认显示第一条数据
      let data = res.data;
      this.currentTask = data[0]
    })
    this.$request.post("/user/verifyPermissions", this.loginUser).then(res => {
      if (!res) {
        //如果鉴权为普通员工，则将一些功能按钮禁用
        this.assignButtonShow = true
        this.editButtonShow = true
        this.repulseButtonShow = true
        this.passButtonShow = true
      }
    })
    //判断是否有从“任何汇总传来的taskId”,有则显示
     if (this.selectTaskId!== undefined && this.selectTaskId !== null){
       this.selectTask(this.selectTaskId);
       localStorage.removeItem("selectTaskId")
     }

  },
  methods: {
    //时间转换
    timeFormatConversion(currentTask) {
      //1.获取到日期数组
      let createDate = currentTask.createTime;
      let updateDate = currentTask.updateTime;
      let completionDate = currentTask.completionTime;
      let deadlineDate = currentTask.deadlineTime;
      //2.日期转换
      if (createDate != null) {
        const [year, month, day, hours, minutes] = currentTask.createTime;
        // Format time as "YYYY年M月D日-HH：mm"
        const formattedTime = `${year}年${month}月${day}日-${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
        this.currentTaskDate.createDate =formattedTime
        console.log(this.currentTaskDate.createDate)
      }else {
        this.currentTaskDate.createDate = '暂无日期'
      }
      if (updateDate != null) {
        const [year, month, day, hours, minutes] = currentTask.updateTime;
        // Format time as "YYYY年M月D日-HH：mm"
        const formattedTime = `${year}年${month}月${day}日-${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
        this.currentTaskDate.updateDate =formattedTime
      }else {
        this.currentTaskDate.updateDate = '暂无日期'
      }
      if (completionDate != null) {
        const [year, month, day, hours, minutes] = currentTask.completionTime;
        // Format time as "YYYY年M月D日-HH：mm"
        const formattedTime = `${year}年${month}月${day}日-${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
        this.currentTaskDate.completionDate =formattedTime
      }else {
        this.currentTaskDate.completionDate = '暂无日期'
      }
      if (deadlineDate != null) {
        const [year, month, day, hours, minutes] = currentTask.deadlineTime;
        // Format time as "YYYY年M月D日-HH：mm"
        const formattedTime = `${year}年${month}月${day}日-${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
        this.currentTaskDate.deadlineDate =formattedTime
      }else {
        this.currentTaskDate.deadlineDate = '暂无日期'
      }
    },

    //任务汇总的任务详情功能，通过taskId获取数据
    async getMyTasks() {
      await this.$request.get("/task/getMyTasks", {
        params: {
          currentTaskHandlerId: this.loginUser.uid
        }
      }).then(res => {
        this.taskList = res.data
      })
    },
    clearSelect() {
      this.selectCondition = ''
      localStorage.removeItem("selectTaskId")
    },
    /*showTest() {
      this.$request.get("/task/getone", {
        params: {
          taskName: "江西理工大学软件工程学院大数据专业 毕业设计bug合集"
        }
      }).then(res => {
        this.currentTask = res.data
      })
    },*/
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    switchTaskPriority(priorityNum) {
      let reslut = {
        tagStyle: '',
        priorityName: ''
      }
      if (priorityNum === '0') {
        reslut.tagStyle = 'info'
        reslut.priorityName = '低'
        return reslut
      } else if (priorityNum === '1') {
        reslut.tagStyle = ''
        reslut.priorityName = '中'
        return reslut
      } else if (priorityNum === '2') {
        reslut.tagStyle = 'danger'
        reslut.priorityName = '高'
        return reslut
      } else {
        reslut.tagStyle = 'warning'
        reslut.priorityName = '紧急'
        return reslut
      }
      return reslut
    },

    switchTaskType(typeNum) {
      let reslut1 = {
        iconStyle: '',
        typeName: ''
      }
      if (typeNum === 0) {
        reslut1.iconStyle = 'iconfont iconbug'
        reslut1.typeName = 'Bug'
        return reslut1
      } else if (typeNum === 1) {
        reslut1.iconStyle = 'iconfont iconkaifa'
        reslut1.typeName = '开发'
        return reslut1
      } else if (typeNum === 2) {
        reslut1.iconStyle = 'iconfont iconqita'
        reslut1.typeName = '其他'
        return reslut1
      } else if (typeNum === 3) {
        reslut1.iconStyle = 'iconfont iconyouhua'
        reslut1.typeName = '优化'
        return reslut1
      } else if (typeNum === 4) {
        reslut1.iconStyle = 'iconfont iconAPIceshi'
        reslut1.typeName = '测试'
        return reslut1
      }
      return reslut1
    },

    //显示任务详情
    async showTaskInfo(taskId) {

      //获取任务实体
      await this.$request.get("/task/getTaskById", {
        params: {
          taskId: taskId
        }
      }).then(res => {
        if (res.successFlag) {
          this.currentTask = res.data
        } else {
          this.$message.error("查看详情失败！")
        }
      })
      //各种id转换成 对应文字数据
      await this.$request.post("/task/translationOfTaskInformation", this.currentTask).then(res => {
        if (res.successFlag) {
          this.taskTranslation = res.data
        } else {
          this.$message.error("详情解析失败！")
        }
      })
      //获取task的任务流转节点路径
      await this.$request.get("/handOverNode/getHandOverNodePath", {
        params: {
          taskId: taskId
        }
      }).then(res => {
        if (res.successFlag) {
          this.handOverNodePath = res.data
        } else {
          this.$message.error("获取任务节点失败！")
        }
      })
      //转换日期
      this.timeFormatConversion(this.currentTask)
    },
    switchTaskStatus(statusNum) {
      //任务状态 （0：创建未处理/1:处理中/2:挂起/3:已完成待测试/4:测试通过/5:测试未通过/6:任务关闭）
      let reslut2 = {
        color: '',
        statusName: ''
      }
      if (statusNum === 0) {
        reslut2.color = '#909399'
        reslut2.statusName = '创建未处理'
        return reslut2
      } else if (statusNum === 1) {
        reslut2.color = '#94c3f3'
        reslut2.statusName = '处理中'
        return reslut2
      } else if (statusNum === 2) {
        reslut2.color = '#E6A23C'
        reslut2.statusName = '挂起'
        return reslut2
      } else if (statusNum === 3) {
        reslut2.color = '#409EFF'
        reslut2.statusName = '已完成待测试'
        return reslut2
      } else if (statusNum === 4) {
        reslut2.color = '#67C23A'
        reslut2.statusName = '测试通过'
        return reslut2
      } else if (statusNum === 5) {
        reslut2.color = '#F56C6C'
        reslut2.statusName = '测试未通过'
        return reslut2
      } else if (statusNum === 6) {
        reslut2.color = '#909399'
        reslut2.statusName = '任务关闭'
        return reslut2
      }
      return reslut2
    },

    //任务分配功能
    async assignTasks() {
      //弹窗可见
      this.assignVisible = true
      //发送请求，去后端查询可分配的用户数据
      await this.$request.get("/user/getAssignableUsers", {
        params: {
          loginUser: localStorage.getItem("loginUser"),
          projectId: this.currentTask.projectId
        }
      }).then(res => {
        if (res.successFlag) {
          this.assignableUsers = res.data
        } else {
          this.$message.error("您没有任务分配权限！")
          this.assignButtonShow = true
        }
      })

    },

    assign(changerUserId) {
      this.$request.put("/task/editTaskHandlerUser", {
        taskId: this.currentTask.taskId,
        taskHandlerId: changerUserId
      }).then(res => {
        if (res.successFlag) {
          this.$message.success("分配成功！")
          location.reload();
          this.assignVisible = false

        } else {
          this.$message.error("分配失败！")
        }
      })
    },

    submitTask(taskStatus) {
      if (this.statusValue === '') {
        this.$message.error("请先选择任务状态再提交！")
        return
      }
      let originalTaskStatus = this.currentTask.taskStatus;
      this.currentTask.taskStatus = taskStatus;
      let originalTaskText = this.currentTask.taskSolution;
      this.currentTask.taskSolution = this.submitTaskText
      this.$request.put("/task/submitTask", this.currentTask).then(res => {
        if (res.successFlag) {
          this.$message.success("提交成功！")
          location.reload();
        } else {
          //提交失败，状态回滚
          this.currentTask.taskStatus = originalTaskStatus;
          this.currentTask.taskSolution = originalTaskText;
          this.$message.error("任务提交失败！")
        }
      })
    },

    async selectTask(selectCondition) {
      //selectDirection=='1'则是通过任务名称搜索  selectDirection=='2' 则是通过任务id搜索
        await this.$request.get("/task/getTaskById", {
          params: {
            taskId: selectCondition
          }
        }).then(res => {
          if (res.successFlag) {
            this.currentTask = res.data
            this.clearSelect()
          } else {
            //提交失败，状态回滚
            this.clearSelect()
            this.$message.error("没有该数据！")
          }
        })
        //转换日期
        this.timeFormatConversion(this.currentTask)
      //字段解析
      await this.$request.post("/task/translationOfTaskInformation", this.currentTask).then(res => {
        if (res.successFlag) {
          this.taskTranslation = res.data
        } else {
          this.$message.error("详情解析失败！")
        }
      })
      //查询业务流转节点
      //获取task的任务流转节点路径
      await this.$request.get("/handOverNode/getHandOverNodePath", {
        params: {
          taskId: this.currentTask.taskId
        }
      }).then(res => {
        if (res.successFlag) {
          this.handOverNodePath = res.data
        } else {
          this.$message.error("获取任务节点失败！")
        }
      })
    },
    //项目打回
    taskRepulse() {
      this.$request.post("/task/taskRepulse", this.currentTask).then(res => {
        if (res.successFlag) {
          this.$message.success("任务打回成功！")
          location.reload();
        } else {
          this.$message.error("任务打回失败！")
        }
      })
    },
    //编辑任务
    editTask() {
      this.editTaskDialogFormVisible = true
      this.editTaskEntity = this.currentTask
      //1.获取项目list
      this.$request.get("/project/getAllProject").then(res => {
        if (res.successFlag) {
          this.projectList = res.data
        } else {
          //提交失败，状态回滚
          this.$message.error("没有获取到项目list数据！")
          this.editTaskEntity = {}
        }
      })
    },
    //提交任务编辑
    async editTaskSubmit() {
      //关闭弹窗
      this.editTaskDialogFormVisible = false
      //发送请求
      await this.$request.put("/task/editTaskSubmit", this.editTaskEntity).then(res => {
        if (res.successFlag) {
          location.reload();
          this.$message.success("修改成功！")
        } else {
          //提交失败，状态回滚
          this.$message.error("修改失败!")
          this.editTaskEntity = {}
        }
      })
    },
    //任务通过
    taskPass() {
      let originalTaskStatus = this.currentTask.taskStatus;
      this.currentTask.taskStatus = '4';
      this.$request.put("/task/submitTask", this.currentTask).then(res => {
        if (res.successFlag) {
          this.$message.success("通过成功！")
          location.reload();
        } else {
          //提交失败，状态回滚
          this.currentTask.taskStatus = originalTaskStatus;
          this.$message.error("任务通过失败！")
        }
      })
    }
  }
}
</script>

<style scoped>
.selectCard {
  height: 60px;
  background-color: white;
  border-bottom: 10px #333333 !important;
  border-radius: 6px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.myWorkDisplayBar {
  margin-top: 2px;
  background-color: white;
  border-bottom: 10px #333333 !important;
  border-radius: 6px;
  display: flex;

}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>